<template>
  <div id="map">
    <MapDirectoryTree v-model="wmsLSPramsLayerStr" :wmsLSParamsLayerArr class="directory-tree" />
    <div class="switch">
      <div class="box-border">
        <div class="box1" @click="showLayer1"></div>
      </div>
      <div class="box-border">
        <div class="box2" @click="showLayer2"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import MapDirectoryTree from './MapDirectoryTree.vue'

const { map } = defineProps({
  map: {
    type: Object,
    required: true,
  },
})

const wmsLSPramsLayerStr = ref('')
const wmsLSParamsLayerArr = ref([
  { name: 't0', title: '居民区', type: 'polygon' },
  { name: 't1', title: '武汉光谷道路', type: 'line' },
  { name: 't2', title: '事件', type: 'point' },
  { name: 't3', title: '摄像头', type: 'point' },
  { name: 't4', title: '警务室', type: 'point' },
])

const wmsBaseLayerUrl = computed(
  () => (name) => `http://127.0.0.1:8089/igs/rest/services/${name}/WMSServer`,
)

const tdk = import.meta.env.VITE_TDK
const extent = [114.317241819695, 30.4545175015849, 114.418164850129, 30.5289619425023]
const projection = ol.proj.get('EPSG:4326')
const center = ol.extent.getCenter(extent)

const view = new ol.View({
  projection,
  center,
  zoom: 13.5,
})
map.setView(view)

const baseLayer = new ol.layer.Tile({
  title: '天地图矢量图层',
  source: new ol.source.XYZ({
    url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=' + tdk,
    wrapX: false,
    crossOrigin: 'anonymous', //解决跨域问题,否则canvas会被标记为污染
  }),
})
map.addLayer(baseLayer)
const baseLayer2 = new ol.layer.Tile({
  title: '天地图矢量图层',
  source: new ol.source.XYZ({
    url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + tdk,
    wrapX: false,
    crossOrigin: 'anonymous',
  }),
  visible: false, //默认隐藏
})
map.addLayer(baseLayer2)

const wmsLayer = new ol.layer.Tile()
const wmsSource = new ol.source.TileWMS({
  //WMS服务基地址
  url: wmsBaseLayerUrl.value('guanggu'),
  //图层等参数
  params: {
    LAYERS: 't0,t1,t2,t3,t4',
  },
  //服务类型
  serverType: 'geoserver',
  crossOrigin: 'anonymous',
})
wmsLayer.setSource(wmsSource)
map.addLayer(wmsLayer)

const showLayer1 = () => {
  baseLayer.setVisible(true)
  baseLayer2.setVisible(false)
}
const showLayer2 = () => {
  baseLayer.setVisible(false)
  baseLayer2.setVisible(true)
}

watch(wmsLSPramsLayerStr, () => {
  wmsSource.updateParams({
    LAYERS: wmsLSPramsLayerStr.value,
  })
  if (wmsLSPramsLayerStr.value === '') wmsLayer.setVisible(false)
  else wmsLayer.setVisible(true)
})
onMounted(() => {
  map.setTarget('map')
})
</script>

<style lang="scss" scoped>
#map {
  position: relative;
  :deep(.ol-viewport) {
    .ol-overlaycontainer-stopevent {
      .ol-zoom {
        left: unset;
        right: 0.5rem;
      }
    }
  }
  .directory-tree {
    position: absolute;
    top: 1rem;
    left: 0;
  }
  .switch {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 100;
    display: flex;
    gap: 5px;
    .box-border {
      padding: 5px;
      border: 1.6px solid #666;
      border-radius: 20px;
      .box1 {
        width: 100px;
        height: 100px;
        background-image: url('/themes/navigation-day-v1.png');
        background-size: cover;
        border-radius: 20px;
        cursor: pointer;
      }
      .box2 {
        width: 100px;
        height: 100px;
        background-image: url('/themes/satellite-v9.png');
        background-size: cover;
        border-radius: 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
